<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4.事件修饰符</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        * {
            margin-top: 20px;
        }

        .box {
            width: 300px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 事件修饰符有三个
        1,prevent:阻止默认事件;
        2,stop:阻止事件冒泡;
        3.once,事件修饰符.可以串联,
        备注：当once事件修饰符参与串联时，其他所有事件修饰符都不起作用
    -->
    <!-- 准备好一个容器-->
    <div id="demo">
        <!-- prevent修饰符
        button按钮在表单元素中具有提交功能,从而使表单跳转到百度,prevnet用来阻止表单跳转
        -->
        <form action="https://www.baidu.com">
            <button @click.prevent="showMsg1">点我提示信息1</button>
        </form>
        <!-- stop修饰符 
        stop修饰符用来阻止事件冒泡,当点击button按钮时,避免事件冒泡到父级div上,注意事件委托不能用stop-->
        <div @click="showMsg1" class="box">
            <button @click.stop="showMsg2"> 点我提示信息2</button>
        </div>
        <!-- once修饰符 
             使按钮点击功能变成一次性-->
        <button @click.once="showMsg3">点我提示信息3</button>
        <!-- 修饰符的串联 
        一旦修饰符串联用上once,所有修饰符都将不发挥作用-->
        <form action="http://www.baidu.com">
            <button @click.stop.prevent.once="showMsg4">点我提示信息4</button>
        </form>
    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    new Vue({
        el: '#demo',
        methods: {
            showMsg1() {
                alert('你好啊!1')
            },
            showMsg2() {
                alert('你好啊!2')
            },
            showMsg3() {
                alert('你好啊!3')
            },
            showMsg4() {
                alert('你好啊!4')
            }
        },
    })
</script>

</html>